<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<title>Index</title>
<link href="/main/css/bootstrap.css" rel='stylesheet' type='text/css' />
<script src="/main/js/jquery.min.js"></script>
<link href="/main/css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<script type="text/javascript" src="/main/js/bootstrap.js"></script>

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'/>
<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'/>
<script src="/main/js/responsiveslides.min.js"></script>
	<script>
		$(function () {
		  $("#slider").responsiveSlides({
			auto: true,
			nav: true,
			speed: 500,
			namespace: "callbacks",
			pager: true,
		  });
		});
	</script>
	<script type="text/javascript" src="/main/js/move-top.js"></script>
	<script src="/main/js/template-web.js"></script>
	<script type="text/javascript" src="/main/js/easing.js"></script>
<!--/script-->
<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event){
					event.preventDefault();
					$('html,body').animate({scrollTop:$(this.hash).offset().top},900);
				});
			});
</script>
</head>
<body>
	<!-- header-section-starts-here -->
    <div th:include="/main/index :: navbar"></div>

	<!-- header-section-ends-here -->
	<div class="wrap">

	</div>

	<!-- content-section-starts-here -->
	<div class="main-body">
		<div class="wrap">
			<ol class="breadcrumb">
				<li><a href="/main/index">主页</a></li>
				<li><a href="/main/pageList">文章库</a></li>
			</ol>
			<div class="col-md-8 content-left">
				<!--content 开始-->


				<div class="articles" >
					<header>
						<h3 class="title-head">文章库</h3>
					</header>
					<!--  开始-->

					<script type="text/html" id="post">
						<div class="article">
							<div class="article-right">
								<div class="article-title">
									<p>{{create_time}}</p>
									<a class="title" href="/main/paper/{{id}}" >{{title}} </a>
									<p >{{segment}}</p>
								</div>
							</div>
							<div class="article-left">
								<a href="/main/paper/{{id}}"><img src="{{paper_image}}" height="120px" width="180px"  alt="" /></a>
								<div class="clearfix"></div>
							</div>
							<div class="clearfix"></div>
						</div>
					</script>
					<div id="content"></div>
					<!--分页-->
					<script src="/main/js/jquery.twbsPagination.min.js"></script>


					<ul id="pagination-demo" class="pagination pagination-lg">
					</ul>

					<script type="text/javascript">
						var url;
						function init(url,list) {
							var search = window.location.search;
							var sp = search.split("=",2);
							var text = sp[1];
							$.ajax({
								type: "post",
								dataType: "json",
								url: url,
								timeout: 20000,
								cache: false,
								success: function (data) {
									var i;
									var j;
									// alert(data.size);
									for (i in data.list) {
										list = template('post', data.list[i]) + list;
									}
									document.getElementById('content').innerHTML = list;
									var pages = Math.ceil(data.total/2);
									console.log(data.total/2);
									var visiablepage;
									if(pages >= 5 ){
										visiablepage = 5;
									}else{
										visiablepage = pages;
									}
									$('#pagination-demo').twbsPagination({
										totalPages: pages,
										visiblePages: visiablepage,
										first:"首页",
										prev:"上一页",
										next:"下一页",
										last:"尾页",
										//去除第一次初始化时就被触发一次
										// initiateStartPageClick:false,
										onPageClick: function (event, page) {
											// console.log(page);//page为当前页码
											$('#content').text('Page ' + page);
											// url = '/main/paper/test/'+page;
											url = '/main/paper/test/'+page+search;
											// if(page!=data.pageNum){
											var  newList= ""
											init(url,newList);


										}
									});
								}
							})
						}
						$(document).ready(function () {
							url = '/main/paper/test/1';
							init(url);
						})
					</script>

<!--					<script>-->
<!--						var result = [];-->
<!--						$.ajax({-->
<!--							type:"get",-->
<!--							url:"/main/paper/test/1",-->
<!--							success:function(data){-->
<!--								if(data.data==""){-->
<!--									return false;-->
<!--								}else{-->
<!--									$.each(data.data, function(i) {-->
<!--										result.push(data.data[i]);-->
<!--									});-->
<!--								}-->
<!--							},complete:function(){-->
<!--								var container = $('#pagination-demo');-->
<!--								var sources = function () {-->
<!--									return result;-->
<!--								}();-->
<!--								var options = {-->
<!--									dataSource: sources,-->
<!--									pageSize: 5,    //单页显示数据量-->
<!--									callback: function (response, pagination) {    //console.log(response)-->
<!--										//window.console && console.log(response, pagination);-->
<!--										var dataHtml = '';-->

<!--										$.each(response, function (index) {-->
<!--											dataHtml += '<div class="age"><h2>' + response[index].name+',<span>age是<b>'+response[index].age+'</b></span></div>' + '</h2>';-->
<!--										});-->
<!--										container.prev().html(dataHtml);-->
<!--									}-->
<!--								};-->
<!--								container.pagination(options);-->
<!--							}-->
<!--						});-->
<!--					</script>-->
					<!-- 结束-->
				</div>
				<div class="clearfix"></div>







                <!--content结束-->
            </div>

			<div class="col-md-4 side-bar">
			<div class="first_half">

				<div class="list_vertical">
		        <section class="accordation_menu">
						</section>
					 </div>
					 </div>
					 <div class="secound_half">
						 <!--标签栏 全部标签 限量20-->
						 <div th:include="/main/index :: tags"></div>
						 <!--标签栏结束-->

                         <!--右侧 三重合label ajax数据显示 开始-->
                         <div th:include="/main/index :: threeDoubleLabel"></div>
                         <!--右侧 三重合label ajax数据显示 结束 在div class=first_half里面-->
						 <!--popular-news 开始-->
						 <div th:include="/main/index :: popular-news"></div>
						 <!--popular-news 结束-->
					</div>
					<div class="clearfix"></div>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
	<!-- content-section-ends-here -->

	<!-- footer-section-starts-here -->
    <div th:include="/main/index :: footer-section"></div>
	<!-- footer-section-ends-here -->
	<script type="text/javascript">
		$(document).ready(function() {
				/*
				var defaults = {
				wrapID: 'toTop', // fading element id
				wrapHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear'
				};
				*/
		$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<a href="#to-top" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
<!----></div>
</body>
</html>
